<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建新元素</title>
    <style type="text/css">
        #ul1{
            width: 100px;
            height: 400px;
            background:rosybrown;
            float:left;
            margin: 20px 30px;
        }
        #ul2{
            width: 100px;
            height: 400px;
            background:yellow;
            float:left;
            margin:20px 30px;
        }
    </style>
    <script type="text/javascript">
        window.onload=function()
        {
            var oBnt=document.getElementById("bnt");
            var oBnt1=document.getElementById("bnt1");
            var oUl1=document.getElementById("ul1");
            var oUl2=document.getElementById("ul2");
            var oTxt=document.getElementById("txt");
            /**@程序名称：remov_Li_from_Ul（*，*）；
             /*@程序功能：为特定的ul删除li和a标签
             /*@入口参数：oUl：需要添加元素的ul的名字，tagName：li下的子标签，可以被鼠标直接操作的元素（如，点击等操作）
             /*
             /* @返回值：无
             */
            function remov_Li_from_Ul(oUl,tagName)
            {
                var aA1=oUl.getElementsByTagName(tagName);
                for(var i=0;i<aA1.length;i++)
                {
                    aA1[i].onclick=function()
                    {
                        oUl.removeChild(this.parentNode);
                    }
                }
            }
            /**@程序名称：add（*，*）；
             /*@程序功能：为特定的ul创建li和a标签
             /*@入口参数：oUl：需要添加元素的ul的名字，inserBefore：创建的方式，如果为0，则顺序创建，先创建的元素在前面，后创建的元素在后面
             /*                                                                 如果为1，则逆序创建，先创建的元素在后面，新创建的元素在前面
             /* @返回值：无
             */
            function add(oUl,insertBefore)
            {
                var oLi=document.createElement("li");
                var oA=document.createElement("a");
                oLi.innerHTML=oTxt.value;
                oA.innerHTML="删除";
                oA.href="javascript:";
                if(insertBefore==0)
                {
                    oUl.appendChild(oLi);
                    var oLi1=oUl1.getElementsByTagName("li");
                    for(var i=0;i<oLi1.length;i++)
                    {
                        oLi1[i].appendChild(oA);
                    }
                }
                else
                {
                    var aLi=oUl2.getElementsByTagName("li");
                    /*
                     /*@作用：if判断的作用是为了解决兼容性问题，在没创建元素的情况下，不存在第一个元素aLi[0]。
                     /*有的浏览器兼容，有的不兼容
                     */
                    if(aLi.length>0)
                    {
                        oUl2.insertBefore(oLi,aLi[0]);   //插入li元素在第一个元素之前
                    }
                    else
                    {
                        oUl2.appendChild(oLi);
                    }
                    aLi[0].appendChild(oA);      //在新创建的元素前加入a标签，新创建的元素肯定是第0位
                }
            }
            /**
             * @程序说明：在“后面创建”按钮点击下的一系列操作。
             * @注意：删除元素的操作也必须放在点击按钮的程序下面，否则无法执行
             */
            oBnt.onclick=function()
            {
                add(oUl1,0) ;
                remov_Li_from_Ul(oUl1,"a");
            }
            /**
             * @程序说明：在“前面创建”按钮点击下的一系列操作。
             * @注意：删除元素的操作也必须放在点击按钮的程序下面，否则无法执行
             */
            oBnt1.onclick=function()
            {
                add(oUl2,1);
                remov_Li_from_Ul(oUl2,"a");
            }
        }
    </script>
</head>
<body>
<div>
    <input type="text" id="txt" >
    <input id="bnt" type="button" value="后创建的在前面">
    <input id="bnt1" type="button" value="新创建的在前面">
</div>
<div>
    <ul id="ul1"></ul>
    <ul id="ul2"></ul>
</div>

</body>
</html>